html, body {
    height: 100%;
    font-family: 'Questrial', sans-serif;
    /*background: rgb(239, 235, 233);*/
    /*background: linear-gradient(to left top, #c0dce9, #fff); */
}

#main-wrapper {
    /*min-height: 100%;*/
    /*max-width: 90em;*/
    /*padding-top: 0;*/
    /*margin-bottom: 4em;*/
    padding-top: 5em;
}


body > footer {
    display: none;
}

.slideout-fixed-bar {
    padding: 0.1em 0 !important;
}

#word-search-menu-button {
    position: absolute !important;
    top: 10px;
    right: 0;
    margin-right: 0.5em;
    display: none;
}

#word-search-menu-button button {
    color: white;
    background: none;
    font-size: 1.5em;
    padding: 0 0.5em;
}

.slideout-menu-button {
    position: absolute !important;
    top: 6px;
    left: 0;
}

#login-register-wrapper {
    position: absolute !important;
    top: 10px;
    right: 0;
}

#courseName {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    width: auto;
    display: inline-block;
    /*padding: 0.15em 0.35em;*/
    /*background: linear-gradient(to top left,#79c2ba,#7cbbbd);*/
/*    background: linear-gradient(to top left,#bc7063,#8f352f);*/
  /*  background: linear-gradient(to top left,#aabd6b,#aeda97);*/
    /*box-shadow: 0 1px 2px rgba(85, 85, 85, 0.3);*/
    color: white;
    border-radius: 1px;
    cursor: pointer;
/*    text-transform: uppercase;*/
    /*letter-spacing: -1px;*/
}

#coursePic {
    height: 48px;
    margin: -1.15em 0 0 0.25em;
    display: none;
}

#left-side {
    padding: 0;
    /*height: 100em;*/
    /*transition: height 2s;*/
}

#renderer {
    position: relative;
    background: white;
    width: 100%;
    padding: 0 0.5em 1em;
}

#seeNavbarBtn {
    font-size: 1.5em;
    cursor: pointer;
    color: #555;
}

#seeNavbarBtn:hover {
    color: #4d91b3;
}

#seeNavbarBtn:active {

    color: #c9c5c3;
}

#nav-dropdown {
    /*width: 72%;*/
    /*opacity: 0;*/
    /*margin: -5px 8px 0;*/
    display: none;
    /*background: rgb(122, 191, 187);*/
    position: absolute;
    /*left: 0;*/
    transform: translateX(-75%);
    padding: 0.5em;
    top: 49px;
    border-radius: 4px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);

}

.nav-dropdown-open {
    display: inline-flex !important;
}

#nav-dropdown div {
    background-color: white;
    margin: 0.5em 0.25em;
    float: left;
}

#nav-dropdown div .btn {
    color: #2b2b2b;
    font-size: 1.3em;
    text-transform: uppercase;
    padding: 0.2em 0.5em 0.4em;
    border-radius: 1px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    background: url('/resources/web/local/images/arrow_down.svg') no-repeat right center content-box;
    width: 160px;
}

.dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    font-size: 1.1em;
    left: auto;
    min-width: inherit;
    width: inherit;
    text-align: center;
    margin: 0;
    border: 0 solid;
    border-radius: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

.arrow-down, .arrow-down-last  {
    margin: 8px 0 0 -23px;
    position: absolute;
    color: #333;
    pointer-events: none;
}

.arrow-down-last {

    right: 9px;
}

.arrow {
    margin: 0 ;
    width: 10px;
    color: #b9b9b9;
}

.rotation .arrow {
    /*animation: rotate-90 0.5s forwards;*/
}

@keyframes rotate-90 {
    from {transform: rotate(90deg);}
    to {transform: rotate(0deg);}
}

.rotation:hover .arrow {
    /*animation: rotate90 0.5s forwards;*/
}

@keyframes rotate90 {
    from {transform: rotate(0deg);}
    to {transform: rotate(90deg);}
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

#section-selection {
    /*display: inline-block;*/
    /*width: 40%;*/
}

#section-selection .btn {
    /*width: 92%;*/
}

#section-dropdown {
    /*width: 36.8%;*/
}

#thread-selection {
    /*display: inline-block;*/
    /*width: 40%;*/
}

#thread-selection .btn {
    /*width: 92%;*/
}

#thread-dropdown {
    /*width: 36.8%;*/
}

#exercise-selection {
    /*display: inline-block;*/
    /*width: 18%;*/
}

#exercise-selection .btn {
    /*width: 100%;*/
}

#plus-exercise-tag {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #f8d54e;
    height: 25px;
    width: 66px;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    font-variant: small-caps;
    margin-left: 25px;
    transition: all 400ms ease;
    width: 0;
}

#learningObjectDescription {
    margin: 0 0.4em 0.35em;
    padding: 0.45em 0 0.25em 0.75em;
    font-size: 22px;
    max-width: 88%;
    display: inline-block; /*Temporary setting*/
}

#exercise-finished {
    display: inline-block;
    max-height: 1.5em;
    vertical-align: text-bottom;
}

#exerciseNumber {
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 1.15em;
    color:gray;
    background: rgba(255, 255, 255, 0.77);
    padding:5px;
}

#right-side {
    /*margin-top: 3.55em;*/
    padding-left: 10px;
    padding-right: 4px;
}

#search-tools {
    text-align: center;
}

#search-tools div button, #search-tools div a  {
    color: #418db2;
    background: white;
    font-size: 1em;
    width: 100%;
    border-radius: 2px !important;
    padding: 6px;
}
#search-tools div button:hover, #search-tools div a:hover {
    text-decoration: underline;
}

/*Same as .search-button just without the margin top*/
#search-input {
    padding-left: 2px;
    padding-right: 2px;
}

#search-field {
    font-size: 1.3em;
    width: 100%;
    border: 0 solid;
    padding: 0.3em 1em;
}

.search-button {
    margin-top: 4px;
    padding-left: 2px;
    padding-right: 2px;
    flex-grow: 1;
}
#search-buttons {
    display: flex;
}
#resource-center-button-div {
    margin: 0.15em 0;
    padding: 2px;
    text-align: left;
}


.resource-center-button a {
    width: 100%;
    color: #418db2 !important;
    background: white;
    font-size: 1.3em;
    /*width: 100%;*/
    border-radius: 2px !important;
    padding: 6px;
}

.resource-center-button a:hover {
    text-decoration: underline;
    color: #418db2;
}

.resource-center-button a img {
    height: 1em;
}

.resource-center-flex-container {
    display: flex;
    /*max-height: 1em;*/
    align-items: center;
    /*justify-content: space-evenly;*/
}

.resource-center-flex-container img {
    flex-grow: 1;
}

.resource-center-flex-container span {
    flex-grow: 1;
    text-align: left;
}


#submitExercise {
    /*background: #CAE0C1;*/
    padding: 0 ;
    margin: 0em 0em 1em;
}

#submitExercise > button {
    margin: 0;
    border-radius: 0px;
    border: none;
    background: #d2d2d2;
    padding: 0.6em 1em;
}

#submitExercise > button:hover {
    background: #d6d6d6;

}

#exercise-container{
    /* Do not put padding here, it interferes with the renderer animation logic!!! */
    margin: 0 0.25em;
    min-height: 240px;
}

#pageNavBox {
    width: 60%;
    float: left;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.bubble-div {
    width: 38px;
    min-width: 38px;
    height: 38px;
    background: white;
    margin: auto 0;
    border-radius: 100%;
    font-size: 1.6em;
    display: flex;
    justify-content: center;
    flex-flow: column;
    text-align: center;
    color: #464646; /* #a8efaa new candidate color */
    float: left;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 1px 3px rgb(150, 150, 150);
}
.bubble-div img {  height: 100%;   }

.bubble-div:hover {
    background: #f7ff2f;
}
.bd-selected {
    width: 45px;
    min-width: 45px;
    height: 45px;
    margin: auto -3px;
    border: 3px solid #fff300;
}
.bd-done {
    background: #b6dba7;
}

.prog-line-div {
    width: 153px;
    height: 8px;
    /*background: white;*/
    margin: auto -5px;
    float: left;
    z-index: 3;
    box-shadow: 0 1px 3px rgb(150, 150, 150);

    background: linear-gradient(to right, #b6dba7 50%, white 50%) right;
    background-size: 200% 100%;
    transition: background-position 2s ease;
}

.pl-done {
    /*background: #b6dba7;*/
    background-position: left;
}


#submitBtn, #betaBugReportBtn {
    float: right;
}

#previous-next {
    margin: 0 auto 0.3em;
    display: flex;
    width: 100%;
}

.prev-button {
    float:left;
    margin-right: 5px;
}

.next-button {
    float:right;
    margin-left: 5px;
}

.submit-button {
    float:right;
    background: #b6dba7 !important;
    color: black !important;
    border: 2px solid #cfe4d0 !important;
    margin-left: 5px;
}

.close-button {
    float:right;
    background: #f79b99 !important;
    color: #613131 !important;
    border: 2px solid #f7bbb0 !important;
    margin-left: 5px;
}

#previous-next .btn {
    font-size: 1.75em;
    font-weight: normal;
    text-transform: uppercase;
    color: #074D4A;
    background: #B8DBEC;
    width:6.65em;
    border-radius: 2px;
    outline: none;
    padding: 4px 0 0;
    border: 2px solid #DAE5EA;
    transition: all 0.2s ease 0s;
    cursor: pointer;
}

#previous-next .btn:hover {
    background: #bce0f1;
    box-shadow: 1px 0px 3px #cacaca;
}

#previous-next .btn:active {
    background: #cde7f0;
}


#previous-next .btn::-moz-focus-inner {
    border: 0;
}



.navigation-button {
    width: 100%;
    border-radius: 0;
}

/*#lastExercise {*/
    /*width: 100%;*/
    /*border-radius: 0;*/
/*}*/

/*#nextExercise {*/
    /*width: 100%;*/
    /*border-radius: 0;*/
/*}*/

/*#newSubmit {*/
    /*width: 100%;*/
    /*border-radius: 0;*/
/*}*/

.custom-padding {
    padding: 0 0.2em;
}

#code-link {
    margin: 0.5em 0.2em;
}

#login-block {
    right: 0.5em !important;
    margin-top: 0.5em !important;
}

#left-side .progress {
    margin-bottom: 0;
    border-radius: 0;
    height: 3px;
    box-shadow: none;
}

#left-side .progress-bar {
    background-color: #b6dba7;
}

#progress-user-message {
    margin-left: 5px;
}

#user-progress {
    margin: 1em 0.15em;
    padding: 1em 0.5em 0.5em;
    background: white;
    border-radius: 2px;
}

#user-progress-header {
    margin-top: 0;
    text-align: center;
    height: 2em;
    margin-bottom: 0.5em;
}

#user-progress-header img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}

.progress-wrapper {
    position: relative;
    margin: -2px 0 4px;
}

#progress-more-btn {
    margin: 15px 0 5px 0;
    display: inline-block;
}

#section-progress-wrapper {
    text-align: center;
}

#section-progress-wrapper .progress-lo-bubble {
    display: inline-block;
    margin: 4px;
    background: #a3b6c7;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 1px 4px #676767;
}

#section-progress-wrapper .lo-completed {
    background: url("/resources/static/system/image/greenCheckMark.svg") no-repeat;
    background-size: 100% 100%;
    box-shadow: none;
}

#section-progress-wrapper .lo-done {
    /*background: url("/resources/static/system/image/blueRedo.svg") no-repeat;*/
    background: url("/resources/static/system/image/yellowRedo.svg") no-repeat;
    background-size: 100% 100%;
    box-shadow: none;
}

#section-progress-wrapper .lo-current {
    border-color: yellow;
}

#right-side .progress-bar {
    background-color: #8be2aa;
}

#right-side .progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#right-side .progress {
    margin-bottom: 0;
}

#command {
    right: 0;
    top: 0.55em;

}

#command .dropdown {
    position: absolute;
    right: 0.5em;
    top: 0.55em;
}


/************
MEDIA QUERIES
*************/

/* Table mode to the point where mobile slide kicks in */
@media (min-width: 767px) and (max-width: 992px) {
    #right-side {
        width: 100%;
        padding: 0;
    }

    #progress-user-message {
        width: 490px;
        margin: 2em auto;
        text-align: center;
        display: block !important;
    }

    #code-link {
        margin: 0 auto;
        width: 190px;
        display: block;
    }
}

/************ TABLET *************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #exercise-container p, #exercise-container span, #exercise-container input, #exercise-container selector {
        font-size: 1.4em;
    }

    #learningObjectDescription{
        font-size: 1.75em;
    }

    #main-wrapper {
        margin: 0 8px 3em;
        width:auto;
    }

    #right-side {
        margin-top:1em;
    }

    .resource-center-flex-container {
        justify-content: center;
    }

    .resource-center-flex-container img {
        flex-grow: unset;
        margin-right: 1em;
    }

    .resource-center-flex-container span {
        flex-grow: unset;
    }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1268px) {
    #nav-dropdown {
        width: 518px;
    }
}

/************ MOBILE *************/
@media (max-width: 767px) {

    .slideout-menu-button {
        top: 8px;
    }

    #iol-nav-bar {
        /*Was this needed for any reason?*/
        /*padding: 0.25em 0 !important;*/
    }

    /*TODO LET THE SIGN IN AND LOGIN MOVE TO THE SLIDEOUT MENU*/
    #login-register-wrapper {
        display: none;
    }

    #word-search-menu-button {
        display: inline-block;
    }

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    #courseName {
        /*font-size: 1.8em;*/

        /*position: absolute;*/
        /*top: -1.35em;*/
        /*left: 2.75em;*/
        /*z-index: 55;*/
    }

    .nav-dropdown-open {
        display: inline-block !important;
    }


    #nav-dropdown {
        transform: translateX(0);
        width: auto;

        left: 0;
    }

    #nav-dropdown div .btn {
        width:210px;
    }
    #seeNavbarBtn {
        display: none;
    }

    #renderer {
        padding: 0 0.15em;
    }

    #previous-next .col-xs-6 {
        padding: 0;
    }

    #main-wrapper {
        min-height: 100%;
        max-width: 100%;

        /*margin: -1.5em 0 3em;*/
        padding-top: 4.5em !important;

    }

    #learningObjectDescription{
        margin: 0 0 0.25em 0;
        padding: 0.25em 0.25em 0.15em;
        max-width:81%;
    }

    #search-tools div #middle-button {
        width: 100%;
    }

    #exerciseNumber {

        right: 0;
    }

    #exercise-container{
        /* Do not put padding here, it interferes with the renderer logic */
        margin: 0
    }

    /*#section-selection {*/
        /*width:30%;*/
    /*}*/
    /*#section-selection .btn {*/
        /*width:86%;*/
    /*}*/
    /*#thread-selection {*/
        /*width:40%;*/
    /*}*/
    /*#thread-selection .btn {*/
        /*width:88%;*/
    /*}*/
    /*#exercise-selection {*/
        /*width: 25%;*/
    /*}*/

    /*#nav-dropdown div .btn {*/
        /*padding: 0.2em 0.2em;*/
    /*}*/
    .arrow {
        margin: 0;
    }
    .arrow-down, .arrow-down-last {
        margin: 12px 0 0 -19px;
        font-size:0.8em;
    }
    .arrow-down-last {
        right: 5%;
    }

    #right-side {
        margin-top: 1em;
        padding: 0 6px;
    }

    /* Overrides the bootstrap default padding */
    #search-tools .col-xs-12 {
        padding: 0 !important;
    }

    .search-button .btn {
        padding: 5px !important;
    }

    #progress-user-message {
        padding: 6px 6px;
        color: #fff;
    }

    #progress-more-btn {
        color: #000;
        display: inline-block;
        text-align: center;
    }

    #progress-user-message {
        margin: inherit;
    }

    #code-link {
        margin: 0.5em -0.1em;
    }
}

@media (max-width: 545px) {

    /*TODO LET THE SIGN IN AND LOGIN MOVE TO THE SLIDEOUT MENU*/
    /*#login-register-wrapper {*/
        /*display: none;*/
    /*}*/

    #previous-next .btn {
        width: 1.65em;
    }

    #pageNavBox {
        width: 75%;
    }
}

@media (max-width: 425px) {
    .slideout-menu-button {
        top: 6px;
    }

    #word-search-menu-button {
        top: 6px;
    }

    #main-wrapper {
        padding-top: 4em !important;
    }

    #courseName {
        font-size: 1.8em;
    }

    #word-search-menu-button {
        margin-right: 0.3em;
    }

    .slideout-menu-button {
        padding: 0.3em 0.5em;
    }
}

@media (max-width: 375px) {
    #main-wrapper {
        /*padding-top: 4em !important;*/
    }

    #courseName {
        font-size: 1.5em;
    }

    #word-search-menu-button {
        margin-right: 0.2em;
    }

    .slideout-menu-button {
        top: 3px;
        padding: 0.2em 0.4em;
    }

    #nav-dropdown {
        top: 46px;
    }
}